<!DOCTYPE html>
<html>
<head th:include="include :: header"></head>
<body>
<div class="layui-fluid" id="app" v-cloak>
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div style="text-align:center;font-weight:bold;">
                <div class="ft_14">{{paper.name}}</div>
                <div class="ft_10">考试时间：{{paper.timeRange}}（共{{paper.totalTime}}分钟）</div>
            </div>
        </div>
        <div class="layui-card-body" id="pictures">
            <div class="bg_w ft_14">
                <div class="question p_10" v-for="(item,index) in questions" :key="item.id" :id="'question_'+item.sortNumber">
                    <!--综合知识-->
                    <div v-if="paper.questionType=='1'">
                        <div class="name">
                            <span style="font-weight:bold;">第{{item.sortNumber}}题：</span> {{item.name}}
                            <div class="question_image" v-if="item.fileUrl">
                                <img :src="item" v-for="item in item.fileUrl" :key="item" style="max-width:50%;max-height:50%;cursor:pointer;"/>
                            </div>
                        </div>
                        <div class="option">
                            <div v-if="item.optionType=='1'">
                                <div class="option_item">
                                    A、{{item.choiceOption['A']}}
                                </div>
                                <div class="option_item">
                                    B、{{item.choiceOption['B']}}
                                </div>
                                <div class="option_item">
                                    C、{{item.choiceOption['C']}}
                                </div>
                                <div class="option_item">
                                    D、{{item.choiceOption['D']}}
                                </div>
                            </div>
                            <div v-if="item.optionType=='2'">
                                <div class="option_item">
                                    A、
                                    <img :src="item.choiceOption['A']" style="max-width:50%;max-height:50%;cursor:pointer;"/>
                                </div>
                                <div class="option_item">
                                    B、
                                    <img :src="item.choiceOption['B']" style="max-width:50%;max-height:50%;cursor:pointer;"/>
                                </div>
                                <div class="option_item">
                                    C、
                                    <img :src="item.choiceOption['C']" style="max-width:50%;max-height:50%;cursor:pointer;"/>
                                </div>
                                <div class="option_item">
                                    D、
                                    <img :src="item.choiceOption['D']" style="max-width:50%;max-height:50%;cursor:pointer;"/>
                                </div>
                            </div>
                            <div v-if="item.optionType=='3'">
                                <div class="option_item">
                                    <img :src="item.choiceOption['option']" style="max-width:50%;max-height:50%;cursor:pointer;"/>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--案例分析-->
                    <div v-if="paper.questionType=='2'">
                        <span style="font-weight:bold;">第{{item.sortNumber}}题：</span>
                        <div class="name" v-html="item.name"></div>
                    </div>

                    <!--论文-->
                    <div v-if="paper.questionType=='3'">
                        <div class="name" v-html="item.name"></div>
                    </div>

                    <hr v-if="index!=questions.length-1"/>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript" th:src='@{/custom/vue.min.js}'></script>
<script th:inline="javascript">
    var paper = [[${paper }]];
    var questions = [[${questions}]];
    layui.config({
        base: ctx + '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        clipboard: 'clipboard',
        viewer: 'viewer'
    }).use(['index', 'clipboard', 'viewer', 'util'], function () {

        var app = new Vue({
            el: '#app',
            data: {
                paper: paper,
                questions: questions,
            },
            created: function () {
                var questions = this.questions;
                for (let i = 0; i < questions.length; i++) {
                    let question = questions[i];
                    question.choiceOption = JSON.parse(question.choiceOption);
                    let fileUrl = question.fileUrl || '';
                    if (fileUrl != '') {
                        var fileUrls = [];
                        let fileUrlArr = fileUrl.split(',');
                        fileUrlArr.map((url) => {
                            fileUrls.push(ctx + url);
                        });
                        question.fileUrl = fileUrls;
                    }
                    let optionType = question.optionType || '';
                    if (optionType != '') {
                        if (optionType == '2') {
                            question.choiceOption['A'] = ctx + question.choiceOption['A'];
                            question.choiceOption['B'] = ctx + question.choiceOption['B'];
                            question.choiceOption['C'] = ctx + question.choiceOption['C'];
                            question.choiceOption['D'] = ctx + question.choiceOption['D'];
                        } else if (optionType == '3') {
                            question.choiceOption['option'] = ctx + question.choiceOption['option'];
                        }
                    }
                }
            },
            mounted: function () {
                new Viewer(document.getElementById('pictures'), {
                    url: 'url'
                });
            }
        });

        //回到顶部按钮
        util.fixbar({
            bgcolor: '#3B91FF',
            showHeight: 100,
            click: function (type) {
                if (type === 'top') {
                    $('.layui-body').animate({
                        scrollTop: 0
                    }, 200);
                }
            }
        });
    });
</script>
</body>
</html>